<template>
	<view class="charts">
		<view class="dis-flex flex-x-between">
			<view class="li-ht60">
				<text class="f-34 f-w text1 letter-spacing3">预警栏目</text>
			</view>
			<view class="dis-flex flex-y-center flex-x-center" v-if="!loading">
				<u-subsection style="width: 300rpx;" active-color="#008CFF" :list="list" @change="change" height="55"
					font-size="24" :current="current"></u-subsection>
			</view>
		</view>
		<view>
			<uni-ec-canvas class="uni-ec-canvas" id="uni-ec-canvas" ref="canvas" canvas-id="uni-ec-canvas" :ec="ec">
			</uni-ec-canvas>
		</view>
	</view>
</template>

<script>
	import uniEcCanvas from '@/components/uni-ec-canvas/uni-ec-canvas.vue'
	import * as echarts from '@/components/uni-ec-canvas/echarts.min'

	let timer = undefined;
	let currentIndex = -1;
	export default {
		name: "OverviewMiddle",
		components: {
			uniEcCanvas
		},
		props: {
			axisData: {
				type: Object,
				default: {}
			},
			loading: {
				type: Boolean,
				default: false
			},
		},
		data() {
			return {
				list: [{
					name: '本周'
				}, {
					name: '本年'
				}, ],
				current: 0,
				ec: {
					lazyLoad: true
				},
				option: {
					//提示框，默认显示
					tooltip: {
						trigger: 'axis',
						axisPointer: { // 坐标轴指示器，坐标轴触发有效
							type: 'line' // 默认为直线，可选为：'line' | 'shadow'
						},
						// 控制提示格式
						// formatter: function(param){
						//     return `${param[0].axisValue}: <br/>${param[0].value}人`
						// }
					},
					//控制直角坐标系与容器上下左右的距离
					grid: {
						left: "3%",
						right: "4%",
						bottom: "3%",
						containLabel: true,
					},
					//图例相关
					legend: {
						top: '10%',
						left: 'center',
						data: ['高风险', '中风险', '低风险'], //与series两个对象中的name对应
					},
					// x轴（指的是水平的那条线）相关配置
					xAxis: [{
						type: 'category',
						data: [], //类目轴数据
						axisLine: {
							show: false, // 隐藏 x 轴线
						},
						axisTick: {
							show: false, // 隐藏 x 轴刻度
						},
						axisLabel: { // 坐标轴标签
							show: true, // 是否显示
							inside: false, // 是否朝内
							color: "rgba(61, 61, 61, 0.5)", // 设置标签颜色
							fontSize: 10,
							interval: 0, //设置刻度间间隔，0表示全部显示不间隔；auto:表示自动根据刻度个数和宽度自动设置间隔个数
						},
						inverse: true, //翻转x轴数据
					}],
					// y轴（垂直的那条线）设置
					yAxis: [{
						type: 'value', //x轴数据类型，value时就是值，category时就是分类，可用于区分y轴与x轴
						axisLabel: { // 坐标轴标签
							show: true, // 是否显示
							// inside: true, // 标签是否朝内,默认false
							interval: 0, //设置刻度间间隔，0表示全部显示不间隔；auto:表示自动根据刻度个数和宽度自动设置间隔个数
							rotate: 0, // 旋转角度
							margin: 5, // 刻度标签与轴线之间的距离
							color: "rgba(61, 61, 61, 0.5)", // 设置 y 轴字体颜色
							fontSize: 12 //标签字号
						},
						splitLine: { // 网格线
							show: true, // 是否显示，默认为true
							lineStyle: {
								color: ['#eee'],
								width: 1,
								type: 'solid'
							}
						},
						axisLine: { // 坐标轴 轴线
							show: false, // 是否显示,默认false
							lineStyle: {
								// color: '#FFFFFF',//轴线颜色
								width: 1, //轴线宽度
								type: 'solid' //轴线类型
							}
						},
					}],
					series: [{
							name: '高风险',
							type: 'line', //表明是折线图line
							data: [], //值数据，与类型数据一一对应
							itemStyle: {
								normal: {
									color: 'rgba(212, 0, 0, 1)', //折线上的颜色
								}
							},
							symbol: 'none', //去掉折线图节点
							smooth: true, //是否平滑曲线，true曲线，false直线
							// 区域填充样式
							areaStyle: {
								normal: {
									// 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果 globalCoord 为 `true`，则该四个值是绝对的像素位置
									color: { //分隔区域的颜色
										x0: 0,
										y0: 0,
										x2: 0,
										y2: 1,
										colorStops: [{
											offset: 0,
											color: "rgba(212, 0, 0, 1)" // 0% 处的颜色
										}, {
											offset: 1,
											color: "rgba(220,56,129,0)" // 100% 处的颜色；中间还可以设置50%、20%、70%时的颜色
										}],
										globalCoord: false // 缺省为 false，以确保上面的x,y,x2,y2表示的是百分比
									}
								}
							},
						},
						{
							name: '中风险',
							type: 'line', //表明是折线图line
							data: [], //值数据，与类型数据一一对应
							itemStyle: {
								normal: {
									color: 'rgba(255, 132, 0, 1)', //折线上的颜色
								}
							},
							symbol: 'none', //去掉折线图节点
							smooth: true, //是否平滑曲线，true曲线，false直线
							// 区域填充样式
							areaStyle: {
								normal: {
									// 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果 globalCoord 为 `true`，则该四个值是绝对的像素位置
									color: { //分隔区域的颜色
										x0: 0,
										y0: 0,
										x2: 0,
										y2: 1,
										colorStops: [{
											offset: 0,
											color: "rgba(255, 132, 0, 1)" // 0% 处的颜色
										}, {
											offset: 1,
											color: "rgba(220,56,129,0)" // 100% 处的颜色；中间还可以设置50%、20%、70%时的颜色
										}],
										globalCoord: false // 缺省为 false，以确保上面的x,y,x2,y2表示的是百分比
									}
								}
							},
						},
						{
							name: '低风险',
							type: 'line', //表明是折线图line
							data: [], //值数据，与类型数据一一对应
							itemStyle: {
								normal: {
									color: 'rgba(0, 140, 255, 1)', //折线上的颜色
								}
							},
							symbol: 'none', //去掉折线图节点
							smooth: true, //是否平滑曲线，true曲线，false直线
							// 区域填充样式
							areaStyle: {
								normal: {
									// 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果 globalCoord 为 `true`，则该四个值是绝对的像素位置
									color: { //分隔区域的颜色
										x0: 0,
										y0: 0,
										x2: 0,
										y2: 1,
										colorStops: [{
											offset: 0,
											color: "rgba(0, 140, 255, 1)" // 0% 处的颜色
										}, {
											offset: 1,
											color: "rgba(220,56,129,0)" // 100% 处的颜色；中间还可以设置50%、20%、70%时的颜色
										}],
										globalCoord: false // 缺省为 false，以确保上面的x,y,x2,y2表示的是百分比
									}
								}
							},
						}
					],
				}

			}
		},
		watch: {
			axisData: {
				handler(newValue) {
					console.log(newValue);
					this.$refs.canvas.init(this.initChart)
				},
				deep: true // 深度监听
			},
		},
		methods: {
			// 切换折线图筛选范围
			change(index) {
				this.current = index;
				this.$emit('filtrate', index + 1)
			},
			// 初始化图表
			initChart(canvas, width, height, canvasDpr) {
				const chart = echarts.init(canvas, null, {
					width: width,
					height: height,
					devicePixelRatio: canvasDpr
				})
				this.option.xAxis[0].data = this.axisData.xAxisData
				this.option.series[0].data = this.axisData.yAxisDataA
				this.option.series[1].data = this.axisData.yAxisDataB
				this.option.series[2].data = this.axisData.yAxisDataC
				canvas.setChart(chart)
				chart.setOption(this.option)
				// 循环切换tooltip
				// this.startTooltipLoop(chart)
				return chart
			},
			// 切换tooltip
			startTooltipLoop(myChart, delay = 2000) {
				var app = {
					currentIndex: this.option.xAxis[0].data.length,
				};
				timer = setInterval(() => {
					// 取消之前高亮的图形
					myChart.dispatchAction({
						type: "downplay",
						seriesIndex: this.option.xAxis[0].data.length,
						dataIndex: app.currentIndex,
					});
					app.currentIndex =
						app.currentIndex - 1 > -1 ?
						app.currentIndex - 1 :
						this.option.xAxis[0].data.length;
					myChart.dispatchAction({
						type: "highlight",
						seriesIndex: 0,
						dataIndex: app.currentIndex,
					});
					myChart.dispatchAction({
						type: "showTip",
						seriesIndex: 0,
						dataIndex: app.currentIndex,
					});
				}, delay);
			},
			closeSwitchTooltip() {
				timer = null;
				clearInterval(timer);
			}
		},

	}
</script>

<style scoped lang="scss">
	.uni-ec-canvas {
		width: 100%;
		height: 500rpx;
		display: block;
	}

	.charts {
		padding: 20rpx 30rpx;

		.text1 {
			line-height: 100rpx;
		}
	}
</style>